<template>
  <!-- 设备签收确认页面 -->
  <div class="equipment-sign">
    <!--按钮区域 begin-->
    <div class="btns" style="padding: 1em; margin-bottom: 1em; background: #fff">
      <el-select v-model="searchForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
        <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
      </el-select>
      <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
        <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
      </el-select>
      <el-input v-model="searchForm.name" name="name" placeholder="设备名"></el-input>
      <el-input v-model="searchForm.model" name="model" placeholder="型号"></el-input>
      <el-select v-model="searchForm.status" placeholder="签收状态" filterable clearable>
        <el-option v-for="item in ['已签收', '未签收']" :keys="item" :label="item" :value="item"/>
      </el-select>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchForm.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
    </div>
    <!--按钮区域 end-->
    <div class="btns">
      <el-button type="primary" size="small" :disabled="selectedRowKeysItems.length>0?false:true" icon="el-icon-check" @click="signItems">签收</el-button>
      <el-button size="small" type="primary" icon="el-icon-check" style="margin-left: 40px" @click="openSettingDialog">设置预警时间</el-button>

      <el-button @click="()=>{this.drawer=true; this.toLogSearch()}" type="primary" size="small" style="float: right; margin-right: 1em">查看签收日志</el-button>
      <span style="margin-left: 40px" v-if="warningTimeInfo">预警时间：<el-button size="mini" type="danger" @click="selectDownTime(warningTimeInfo.warningTime)">{{warningTimeInfo.warningTime}}天</el-button></span>
      <span style="margin-left: 40px" v-if="warningTimeInfo">预告时间：<el-button size="mini" type="warning" @click="selectDownTime(warningTimeInfo.noticeTime)">{{warningTimeInfo.noticeTime}}天</el-button></span>
    </div>
    <!--表格卡片区域 begin-->
    <el-card shadow="never">
      <a-table
        size="small"
        :rowKey="record => record.itemId"
        :loading="stockChecksTable.loading"
        :data-source="stockChecksTable.data"
        :scroll="stockChecksTable.data.length > 0 ?{ x: 1600}:{}"
        :row-class-name="tableRowClassName"
        :row-selection="{ selectedRowKeys: selectedRowKeysItems, onChange: itemsSelectionChange, selections: [{
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              this.selectedRowKeysItems = stockChecksTable.data.map(item=>{return item.itemId});
            },
          }]}">
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="shouldNumber" title="应签收" data-index="shouldNumber">
          <template slot-scope="text, record">
            <el-tag type="success">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="alreadyNumber" title="已签收" data-index="alreadyNumber">
          <template slot-scope="text, record">
            <el-tag type="success">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="10" align="center" ellipsis="true" fixed="left" key="notNumber" title="未签收" data-index="notNumber">
          <template slot-scope="text, record">
            <el-tag :type="text == 0 ? 'success':'warning'">{{text}}</el-tag>
          </template>
        </a-table-column>
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="item" title="设备名" data-index="item" />
        <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="supplier" title="供应商" data-index="supplier" />
        <a-table-column :width="400" align="center" ellipsis="true" key="brand" title="品牌" data-index="brand" />
        <a-table-column :width="150" align="center" ellipsis="true" key="model" title="型号" data-index="model" />
        <a-table-column :width="150" align="center" ellipsis="true" key="time" title="合同签订时间" data-index="time" >
        <template slot-scope="text, record">
          {{dateTimeFormat(record.time)}}
        </template>
        </a-table-column>
        <a-table-column align="center" key="params" ellipsis="true" title="技术参数" data-index="params" />
        <a-table-column :width="100" align="center" key="price" title="单价" data-index="price" />
        <a-table-column :width="100" align="center" ellipsis="true" key="delivery" title="货期" data-index="delivery" />
        <a-table-column :width="100" align="center" ellipsis="true" key="warranty" title="质保期" data-index="warranty" />
        <a-table-column :width="100" align="center" ellipsis="true" key="remark" title="备注" data-index="remark" />
      </a-table>
    </el-card>
<!-- 预警时间设置模态框   -->
    <el-dialog v-el-drag-dialog title="设置预警时间" :visible.sync="settingDialog.visible" width="25%">
      <el-form :model="settingDialog.form" status-icon ref="settingDialogForm">
        <el-form-item label="预警时间" label-width="80px" size="small">
          <el-input style="width: 65%" v-model="settingDialog.form.warningTime" type="text" size="small" placeholder="输入预警天数">
          </el-input>
           单位/天
        </el-form-item>
        <el-form-item label="预告时间" label-width="80px" size="small">
        <el-input style="width: 65%" v-model="settingDialog.form.noticeTime" type="text" size="small" placeholder="输入预告天数">
        </el-input>
           单位/天
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="settingDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="setWarningTime()">确 定</el-button>
      </div>
    </el-dialog>
    <!--右边抽屉-->
    <el-drawer
      title="签收操作日志"
      :visible.sync="drawer"
      direction="rtl"
      size="70%"
    >
      <div class="btns" style="padding: 1em; background: #fff">
        <el-select v-model="searchLogForm.proId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
          <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
        <el-select v-model="searchLogForm.contractId" placeholder="选择合同" filterable clearable>
          <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
        </el-select>
        <el-input v-model="searchLogForm.item" placeholder="设备名"></el-input>
        <el-date-picker
          style="margin-left: 8px"
          v-model="searchLogForm.time"
          unlink-panels
          value-format="timestamp"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="btns">
        <el-button @click="toLogSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px; float: right">查询</el-button>
        <el-button type="danger" size="small" :disabled="logRowKeysItems.length>0?false:true" icon="el-icon-delete" @click="revokeItems">撤销</el-button>
      </div>
      <a-table
        size="small"
        style="margin-left: 1em; margin-right: 1em"
        :rowKey="record => record.id"
        :loading="stockSignLogTable.loading"
        :data-source="stockSignLogTable.data"
        :scroll="stockSignLogTable.data.length > 0 ?{ x: 800}:{}"
        :row-selection="{ selectedRowKeys: logRowKeysItems, onChange: logSelectionChange, selections: [{
            key: 'all-data',
            text: '全选',
            onSelect: () => {
              this.logRowKeysItems = stockSignLogTable.data.map(item=>{return item.id});
            },
          }]}">
        <a-table-column align="center" ellipsis="true" key="item" title="设备名" data-index="item"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="checkNumber" title="签收数量" data-index="checkNumber"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="checkPeople" title="签收人" data-index="checkPeople"></a-table-column>
        <a-table-column align="center" ellipsis="true" key="checkTime" title="签收时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.checkTime)}}
          </template>
        </a-table-column>
        <a-table-column align="center" ellipsis="true" key="time" title="操作时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.time)}}
          </template>
        </a-table-column>
      </a-table>
    </el-drawer>

    <!--模态框-->
    <el-dialog v-el-drag-dialog :title="stockDialog.title" :visible.sync="stockDialog.visible">
      <el-form :model="stockDialog.form"  status-icon>
        <el-form-item :label="stockDialog.title+'数量'" label-width="80px" size="small" prop="number" :disabled="selectedRowKeysItems.length>0?true:false">
          <el-input-number v-model="stockDialog.form.checkNumber" :precision="2" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item :label="stockDialog.title+'时间'" label-width="80px" size="small" prop="time">
          <el-date-picker
            v-model="stockDialog.form.checkTime"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="签收人" label-width="80px" size="small" prop="operator">
          <el-input v-model="stockDialog.form.checkPeople" type="text" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="80px" size="small" prop="remark">
          <el-input v-model="stockDialog.form.checkRemark" type="textarea" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="stockDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="stockDialogHandle()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

  import "@/styles/auto-style.css";
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
  import elDragDialog from "@/directive/el-drag-dialog";
  import { dateTimeFormat, dateFormat } from '@/utils/format'
  import {getNeedDate} from '@/utils/moment'

  export default {
    directives: { elDragDialog },
    data() {
      return {
        getNeedDate,
        warningTimeInfo: {
        },
        settingDialog: {
          form:{},
          visible: false
        },
        logRowKeysItems: [],
        dateTimeFormat,
        stockSignLogTable: {
            data: [],
            loading: false
        },
        searchLogForm: {},
        drawer: false,
        stockDialog: {
            title: '签收',
            form: {},
            visible: false
        },
        selectedRowKeysItems: [],
        selectedRowKeys: [],
        url: {
            findStockCheck: '/stock/check/findStockCheck',
            batchSign: '/stock/check/batchSign',
            singleSign: '/stock/check/singleSign',
            findSignLog: '/stock/check/findSignLog',
            revoke: '/stock/check/revoke',
            setWarningTime: '/stock/check/setWarningTime',
            selectWarningTime: '/stock/check/selectWarningTime',
            selectDownTime: '/stock/check/selectDownTime'
        },
        // 按钮区域表单
        searchForm: {

        },
        options: {
          projects: [],
          contracts: [],
        },
        stockChecksTable: {
          data: [],
          loading: false,
        }
      }
    },
    created() {
      this.loadProjects()
      this.selectWarningTime();
    },
    methods: {
      tableRowClassName(row, index) {

        if (!this.warningTimeInfo.warningTime && !this.warningTimeInfo.noticeTime){
          let warn = new Date(getNeedDate(this.warningTimeInfo.warningTime)).getTime()
          let notice = new Date(getNeedDate(this.warningTimeInfo.noticeTime)).getTime()
          if (row.time <= warn) {
            return 'danger-row';
          }else if(row.time <= notice){
            return 'warning-row';
          }
        }else {
          return '';
        }
      },
      //按条件查询在紧急时间或预告时间内的签收信息
      selectDownTime(time){
        this.searchForm.warningTime = time
        postActionByQueryString(this.url.selectDownTime,this.searchForm)
          .then(resp => {
            this.stockChecksTable.data = resp.data
            this.stockChecksTable.loading = false
          })
          .catch(()=>{
            this.stockChecksTable.loading = false
          })
      },
      //查询预警时间
      selectWarningTime(){
        getAction(this.url.selectWarningTime,{type: "签收"})
        .then(resp =>{
          this.warningTimeInfo = resp.data
        })
      },
      //设置预警时间
      setWarningTime(){
        this.settingDialog.form.type = "签收"
        postActionByQueryString(this.url.setWarningTime,this.settingDialog.form)
        .then(resp =>{
            this.$message.success(resp.message)
            this.settingDialog.visible = false
            this.selectWarningTime()
          this.settingDialog.form = {}
        })
      },
      //打开设置预警时间模态框
      openSettingDialog(){
        this.settingDialog.visible = true
        let form = Object.assign({},this.warningTimeInfo)
        if (this.warningTimeInfo.warningTime&&this.warningTimeInfo.warningTime!=null){
          this.$set(this.settingDialog.form,"warningTime" ,form.warningTime)
        }
        if (this.warningTimeInfo.noticeTime&&this.warningTimeInfo.noticeTime!=null){
          this.$set(this.settingDialog.form,"noticeTime" ,form.noticeTime)
        }
      },
      //日志查询
      toLogSearch(){
          this.searchLogForm = {}
          this.logRowKeysItems = [];
          this.stockSignLogTable.loading = true
          if(this.searchLogForm.time){
              this.searchLogForm.startTime = this.searchLogForm.time[0]
              this.searchLogForm.endTime = this.searchLogForm.time[1]
          }
          delete this.searchLogForm.time
          getAction(this.url.findSignLog, this.searchLogForm)
              .then(resp => {
                  this.stockSignLogTable.data = resp.data
                  this.stockSignLogTable.loading = false
              })
              .catch(()=>{
                  this.stockSignLogTable.loading = false
              })
      },
      logSelectionChange(record){
          const ids = []
          record.map(item => {
              ids.push(item)
          })
          this.logRowKeysItems = ids
      },
      stockDialogHandle(){
        this.stockDialog.form.itemId = this.selectedRowKeysItems[0]
        postActionByQueryString(this.url.singleSign, this.stockDialog.form)
          .then(resp => {
              this.selectedRowKeysItems = []
              this.stockDialog.form = {}
              this.stockDialog.visible = false
              this.toSearch()
          })
      },
      signItems(){
          if(this.selectedRowKeysItems.length > 1){
              //批量签收
            this.$confirm('签收'+ this.selectedRowKeysItems.length + '项' +'，是否确定选择？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              postActionByQueryString(this.url.batchSign, {itemIds : this.selectedRowKeysItems})
                  .then(resp => {
                      this.selectedRowKeysItems = []
                      this.toSearch()
                  })
            }).catch(() => {
                //this.onSelectChange(ids, rows)
            })
          }else {
              //单个签收
              this.stockDialog.visible = true
          }
      },
      revokeItems(){
        this.$confirm('撤销'+ this.logRowKeysItems.length + '项' +'，是否确定选择？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            postActionByQueryString(this.url.revoke, {ids : this.logRowKeysItems})
                .then(resp => {

                }).finally(() => {
                this.logRowKeysItems = []
                this.toLogSearch()
                this.toSearch()
            })
        }).catch(() => {
        })
      },
      itemsSelectionChange(record){
          const itemsId = []
          record.map(item => {
              itemsId.push(item)
          })
          this.selectedRowKeysItems = itemsId
      },
      // 按钮区域搜索事件
      toSearch() {
          this.selectedRowKeysItems = []
          this.stockChecksTable.loading = true
          getAction(this.url.findStockCheck, this.searchForm)
          .then(resp => {
              this.stockChecksTable.data = resp.data
              this.stockChecksTable.loading = false
          })
          .catch(()=>{
          this.stockChecksTable.loading = false
          })
      },
      // 查询项目列表
      loadProjects() {
        getAction("/purchase/project/findAllLike")
          .then((resp) => {
            this.options.projects = resp.data
          })
      },
      // 查询合同列表
      loadContracts(proId) {
        getAction('/purchase/contract/findByProjectId', { projectId: proId })
        .then(resp => {
          this.options.contracts = resp.data
        })
      },
      // 项目下拉框 Change 事件
      proSelectChange(id) {
        this.$delete(this.searchForm,'contractId')
        this.loadContracts(id)
      },
    }
  }
</script>
<style lang="scss" scoped>
  .equipment-sign {
    /deep/.ant-table {
      .danger-row{
        background: #f1b7b7;
      }
      .warning-row{
        background: #eae2c5;
      }
    }
  }

</style>

